import React, { useState, useEffect } from 'react';
import './Information.css'

// 定义表单字段的类型
type FormValues = {
    gender: string;
    birthday: string;
    phoneNumber: string;
    weChat: string;
    email: string;
    industry: string;
    occupation: string;
    city: string;
    address: string;
    usagePreference: string;
};

const PersonalInfoForm: React.FC = () => {
    // 初始化表单状态
    const [formValues, setFormValues] = useState<FormValues>({
        gender: '',
        birthday: '',
        phoneNumber: '',
        weChat: '',
        email: '',
        industry: '',
        occupation: '',
        city: '',
        address: '',
        usagePreference: ''
    });

    // 从本地存储加载数据
    useEffect(() => {
        const savedValues = localStorage.getItem('formValues');
        if (savedValues) {
            setFormValues(JSON.parse(savedValues));
        }
    }, []);

    // 保存数据到本地存储
    const saveData = () => {
        localStorage.setItem('formValues', JSON.stringify(formValues));
        alert('保存成功!');
    };

    // 计算进度条的百分比
    const calculateProgress = () => {
        const fields = Object.values(formValues);
        const filledFields = fields.filter(field => field.trim() !== '').length;
        const totalFields = fields.length;
        return (filledFields / totalFields) * 100;
    };

    const progress = calculateProgress();

    // 更新表单字段
    const handleChange = (field: keyof FormValues, value: string) => {
        setFormValues(prevValues => ({
            ...prevValues,
            [field]: value
        }));
    };

    return (
        <div style={{ padding: '0px 100px 0px 100px', marginTop: '' }}>
            <form>
                {/* 进度条 */}
                <div>
                    <p style={{ color: '#bebaba', width: '100%', height: '80px', lineHeight: '105px' }}>
                        <p style={{ width: '80%', height: '100%', float: 'left' }}>您的资料完善度 <span style={{ color: '#ff6600', }}> {Math.round(progress)}%</span></p>
                        <p style={{ width: '20%', height: '100%', float: 'right' }}>完善信息，让包图更懂你</p>
                    </p>

                    <ul style={{ listStyle: 'none', padding: 0, display: 'flex' }}>
                        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i, index) => (
                            <li
                                key={i}
                                style={{
                                    width: '10%',
                                    height: '15px',
                                    backgroundColor: i * 10 < progress ? '#ff6600' : 'lightgray',
                                    margin: '2px',
                                    borderRadius: index === 0 ? '10px 0 0 10px' : index === 9 ? '0 10px 10px 0' : '0'
                                }}
                            />
                        ))}
                    </ul>

                </div>
                <div style={{ marginLeft: '20px', marginTop: '50px' }}>
                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'> 性别:</span>
                            <label className='youCe'>
                                <input
                                    type="radio"
                                    value="Male"
                                    checked={formValues.gender === 'Male'}
                                    onChange={() => handleChange('gender', 'Male')}
                                />
                                男
                            </label>
                            <label className='youCe' style={{ marginLeft: '30px' }}>
                                <input
                                    type="radio"
                                    value="Female"
                                    checked={formValues.gender === 'Female'}
                                    onChange={() => handleChange('gender', 'Female')}
                                />
                                女
                            </label>
                        </label>
                    </div>

                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>生日:</span>
                            <input
                                className='youCe'
                                type="date"
                                value={formValues.birthday}
                                onChange={(e) => handleChange('birthday', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px', fontWeight: 'bold', fontSize: '16px' }}
                            />
                        </label>
                    </div>

                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>手机号:</span>
                            <input
                                className='youCe'
                                type="tel"
                                value={formValues.phoneNumber}
                                onChange={(e) => handleChange('phoneNumber', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px', fontSize: '16px' }}
                            />
                        </label>
                    </div>

                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>微信:</span>
                            <input
                                className='youCe'
                                placeholder='请输入你的微信'
                                type="text"
                                value={formValues.weChat}
                                onChange={(e) => handleChange('weChat', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px', fontSize: '16px' }}
                            />
                        </label>
                    </div>

                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>邮箱:</span>
                            <input
                                className='youCe'
                                placeholder='请输入你常用的邮箱'
                                type="email"
                                value={formValues.email}
                                onChange={(e) => handleChange('email', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px', fontSize: '16px' }}
                            />
                        </label>
                    </div>

                    <div className='blackercer'>
                        <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>所属行业:</span>
                            <select
                                className='youCe'
                                value={formValues.industry}
                                onChange={(e) => handleChange('industry', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px',fontSize: '16px' }}
                            >
                                <option value="">请选择</option>
                                <option value="传媒/广告/会展业">传媒/广告/会展业</option>
                                <option value="文体娱乐">文体娱乐</option>
                                <option value="互联网/信息技术">互联网/信息技术</option>
                            </select>
                        </label>
                    </div>

                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>职业:</span>
                            <select
                                className='youCe'
                                value={formValues.occupation}
                                onChange={(e) => handleChange('occupation', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px',fontSize: '16px' }}
                            >
                                <option value="">请选择</option>
                                <option value="设计师">设计师</option>
                                <option value="运营策划人员">运营策划人员</option>
                                <option value="Teacher">文职/办事人员/管理人员</option>
                                <option value="其它">其它</option>
                            </select>
                        </label>
                    </div>

                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>所在城市:</span>
                            <select
                                className='youCe'
                                value={formValues.city}
                                onChange={(e) => handleChange('city', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px', fontSize: '16px' }}
                            >
                                <option value="">请选择</option>
                                <option value="New York">New York</option>
                                <option value="Los Angeles">Los Angeles</option>
                                <option value="Chicago">Chicago</option>
                            </select>
                        </label>
                    </div>

                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>详细地址:</span>
                            <input
                                className='youCe'
                                placeholder='仅供活动寄送奖品,30字内'
                                type="text"
                                value={formValues.address}
                                onChange={(e) => handleChange('address', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px', fontSize: '16px' }}
                            />
                        </label>
                    </div>
                    <div className='mieBox'>
                        <label className='quanName'>
                            <span className='labelText'>使用倾向:</span>
                            <select
                                className='youCe'
                                value={formValues.usagePreference}
                                onChange={(e) => handleChange('usagePreference', e.target.value)}
                                style={{ border: 'none', borderBottom: '1px solid black', outline: 'none', width: '280px', height: '40px', lineHeight: '40px',fontSize: '16px' }}
                            >
                                <option value="">请选择</option>
                                <option value="个人使用">个人使用</option>
                                <option value="企业使用">企业使用</option>
                            </select>
                        </label>
                    </div>
                    </div>

                </div>


                <button className='btnBaoc' type="button" onClick={saveData}>保存</button>
            </form>
        </div>
    );
};

export default PersonalInfoForm;